<template>
  <div class="my-pubilsh" :style="{ height: `${viewheight.GetViewHeight(180)}px` }">
    <PostCardComponenent :postpage="postpage" :loading="loading" :disabled="disabled" @load-data="loadData">
      <template #dropslot="slotValue">
        <el-dropdown-menu>
          <el-dropdown-item :icon="Editor" @click="editorPost(slotValue.itemValue)">编辑</el-dropdown-item>
          <el-dropdown-item :icon="DeleteFour" @click="delPost(slotValue.itemValue)">删除</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </PostCardComponenent>
    <el-dialog v-model="isdialog" width="850" center @close="closeEditor">
      <FormComponent ref="formRef" :field-colums="FormCon1" :isrule="rules">
        <template v-slot:basiceditor>
          <BasicEditor ref="editorRef" />
        </template>
        <template v-slot:sharetype>
          <el-radio-group v-model="radiovalue">
            <el-radio label="学习笔记" size="large">学习笔记</el-radio>
            <el-radio label="电子文档" size="large">电子文档</el-radio>
            <el-radio label="习题" size="large">习题</el-radio>
            <el-radio label="其他资源" size="large">其他资源</el-radio>
          </el-radio-group>
        </template>
        <template v-slot:options>
          <div class="option">
            <el-button type="primary" @click="updatecontent">
              <el-icon :size="16">
                <i-ic-round-publish />
              </el-icon>
              Update
            </el-button>
            <el-button type="warning" @click="resetcontent">
              <el-icon :size="16">
                <i-fluent-delete-24-filled />
              </el-icon>
              Reset
            </el-button>
          </div>
        </template>
      </FormComponent>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { useViewHeightStore } from "@/store/viewheight";
import PostCardComponenent from "@components/PostCardComponent/PostCardComponenent.vue";
import { Editor, DeleteFour } from "@icon-park/vue-next";
import { Tpost } from "@/models/post";
import { ref, watch } from "vue";
import { del_postlist, get_MyPost } from "@/api/postapi";
import { del_post, update_post } from "@api/postapi";
import { RandomPicture } from "@utils/randompic";
import { pull } from "lodash";
import FormComponent from "@components/FormComponent/FormComponent.vue";
import { rules } from "@views/publish/config/form-config";
import { useCollege } from "@store/collegeinfo";
import { get_major } from "@api/college";
import { storeToRefs } from "pinia";
import { FormCon1 } from "@views/person/config/update-post-config";
import BasicEditor from "@components/BasicEditor.vue";

const viewheight = useViewHeightStore();

const loading = ref<boolean>(false);
const postpage = ref<Array<Tpost>>([]);
const totalpost = ref<number>(0);
const disabled = ref<boolean>(false);
const current = ref<number>(0);
const isdialog = ref<boolean>(false);
const radiovalue = ref<string>();
const formRef = ref<InstanceType<typeof FormComponent>>();
const editorRef = ref<InstanceType<typeof BasicEditor>>();
const updatepost = ref<Tpost>();
const { FormCon } = storeToRefs(useCollege());


const loadData = async () => {
  //初始化走的地方
  current.value++;
  disabled.value = false;
  loading.value = true;
  const res = await get_MyPost({ current: current.value, size: 9 });
  if (res.code === 200) {
    if (res.data) {
      res.data.records.forEach((item) => {
        item.pic = RandomPicture();
      });
      postpage.value = postpage.value.concat(res.data.records);
      totalpost.value = res.data.total;
    } else {
      disabled.value = true;
    }
    loading.value = false;
  }
};

const closeEditor = () => {
  FormCon1[4].options = [];
  FormCon1[5].options = [];
};

const editorPost = (item: Tpost) => {
  isdialog.value = true;
  updatepost.value = item;
  FormCon.value[0].options.forEach((item) => {
    FormCon1[4].options.push({
      label: item.label,
      value: item.value,
    });
  });
};

const updatecontent = async () => {
  const newpost = {
    ...updatepost.value,
    ...formRef.value.formData,
    type: radiovalue.value,
    content: editorRef.value.content,
  };
  const res = await update_post(newpost);
  if (res.msg === "success") {
    ElMessage.success("修改成功！");
    const index = postpage.value.findIndex(
      (item) => item.id === updatepost.value.id
    );
    postpage.value[index] = newpost;
    updatepost.value = newpost;
  }
};

const resetcontent = () => {
  formRef.value.formData = {
    title: updatepost.value.title,
    authority: updatepost.value.authority,
    grade: updatepost.value.grade,
    major: updatepost.value.major,
    college: updatepost.value.college,
  };
  radiovalue.value = updatepost.value.type;
  editorRef.value.content = updatepost.value.content;
};

const delPost = async (item: Tpost) => {
  const res = await del_postlist({ id: item.id });
  if (res.code === 200) {
    await del_post({ postId: item.id });
    ElMessage.success("删除帖子成功！");
    pull(postpage.value, item);
  }
};

watch(
  () => updatepost.value,
  (newValue) => {
    setTimeout(async () => {
      formRef.value.formData = {
        title: newValue.title,
        authority: newValue.authority,
        grade: newValue.grade,
        major: newValue.major,
        college: newValue.college,
      };
      radiovalue.value = newValue.type;
      editorRef.value.content = newValue.content;
      const res = await get_major({ college: newValue.college });
      if (res.code === 200) {
        res.data.forEach((item) => {
          FormCon1[5].options.push({
            label: item,
            value: item,
          });
        });
      }
    }, 100);
  }
);

watch(
  () => postpage.value,
  () => {
    if (postpage.value.length === totalpost.value) {
      disabled.value = true;
    }
  },
  { immediate: true }
);
</script>

<style scoped lang="less">
.my-pubilsh {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

  .option {
    width: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: space-around;
  }
}
</style>
